<template>
  <div id="header">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      text-color="#fff"
      active-text-color="#ffd04b"
      background-color="#34495e"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-search"></i>
          浏览
        </template>
        <el-menu-item index="1-1" disabled>生活</el-menu-item>
        <el-menu-item index="1-2" disabled>便民</el-menu-item>
        <p class="submenu-level">特色</p>
        <el-menu-item index="1-3" class="light">&nbsp;&nbsp;咖啡店</el-menu-item>
        <el-menu-item index="1-4" disabled>&nbsp;&nbsp;西餐厅</el-menu-item>
        <el-menu-item index="1-5" disabled>&nbsp;&nbsp;深夜食堂</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-xianluguihua" style="font-size:28px;color:#aaa;"></i>
          规划
        </template>
        <el-menu-item index="2-1" disabled>评估</el-menu-item>
        <el-menu-item index="2-2" disabled>选址</el-menu-item>
        <el-menu-item index="2-3" disabled>模拟</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont icon-linechart" style="font-size:24px;color:#aaa;margin-right:5px;"></i>
          指数
        </template>
        <el-menu-item index="3-1" disabled>商圈指数</el-menu-item>
        <el-menu-item index="3-2" disabled>便民指数</el-menu-item>
        <el-menu-item index="3-3" disabled>国际化指数</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="title-wrap">
      <i class="iconfont icondashujufuwupingtai"></i>
      <h1 class="title">朝阳区生活服务设施一张图</h1>
      <p class="sub-title">Map of Public Facilities in Chaoyang</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1-3",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      window.console.log(key, keyPath);
    }
  }
};
</script>

<style lang="stylus">
@import url('//at.alicdn.com/t/font_1161479_tswsf062rzo.css');
@import url(//at.alicdn.com/t/font_1192264_f2zehb3f6xu.css);

// 2c3e50
#header 
  background: #2c3e50;
  position relative
  height 100%
  width 100%

  .el-menu-demo
    position absolute

  .title-wrap  
    background #2c3e50 url(../../assets/header_bg.png) center;
    width 620px
    color: #fff;
    margin: 0 auto
    padding: 10px;
    position: relative;
    text-align: center;

    .title 
      font-weight: bold;
      font-size: 22px;
      color: #fff;
      letter-spacing: 5px;
      text-indent: 60px;
      line-height: 26px;
    

    .sub-title 
      color: #ddd;
      letter-spacing: 3.4px;
      font-size: 12px;
      text-indent: 60px;
    

    .iconfont 
      position: absolute;
      font-size: 42px;
      top: -1px;
      left: 120px;

.submenu-level 
  background: #34495e;
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  color: #bdc3c7;
  text-indent: 11px;

.el-submenu.is-active i,
.el-submenu.is-active .el-submenu__icon-arrow
  color rgb(255, 208, 75)

.light
  font-weight bold!important
</style>
